import React, { Component } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import { Input, DatePicker, message, Form, Col, Row, Select, Button, Table } from 'antd';

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  initCurrent: Function,
}

@connect()
class AuditListS extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      data: [],
      time: [],
      states: [],
      unitId: []
    };
  }

  getArry = (pageNum, states, time, unitId) => {
  }

  componentDidMount() {
    this.getArry(0, [], [], []);
  }

  searchRecord = () => {
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.initCurrent()
      }
    });
  }

  getState = (e) => {
    let states = e === 0 ? [] : [e];
    this.setState({
      states
    })
  }

  getUnitName = (e) => {
  }

  exportRecord = () => {
    message.warning('暂不支持导出');
  }

  render() {
    const columns = [ {
        title: '单位名称',
        dataIndex: 'unit'
      }, {
        title: '报备时间',
        dataIndex: 'date'
      }, {
        title: '报备人',
        dataIndex: 'person'
      }, {
        title: '审核结果',
        dataIndex: 'result',
        render: text => <a>{ text }</a>
      }, {
        title: '联系电话',
        dataIndex: 'tel'
      }, {
        title: '操作',
        dataIndex: '',
        render: (text, record) => (
          <span>
            <Link to='/ReportRecord/audit/Audit' style={{ color: '#0099cc' }}>审核</Link>
            <span className="ant-divider" />
            <span style={{ color: '#0099cc' }} onClick={this.exportRecord}>导出</span>
          </span>
        )
      },
    ];
    const pagination = {
      total: this.state.total,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      onChange: async (current, page) => {
        let pageNum = (parseInt(current, 10) - 1) * 10;
        this.getArry(pageNum, [], [], []);
      }
    };
    const FormItem = Form.Item;
    const { Option } = Select;
    const { RangePicker } = DatePicker;
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 8 },
      },
    };
    return (
      <Form className='recordList'>
        <section>
          <Row>
            <Col span={7} key={1}>
              <FormItem
                {...formItemLayout}
                label='单位名称'
              >
                {getFieldDecorator('name')(
                  <Input placeholder="请输入单位名称" />
                )}
              </FormItem>
            </Col>
            <Col span={7} key={2}>
              <FormItem
                {...formItemLayout}
                label='报备时间'
              >
                {getFieldDecorator('date')(
                  <RangePicker style={{ width: 210, marginLeft: '10px' }} />
                )}
              </FormItem>
            </Col>
            <Col span={7} key={3}>
              <FormItem
                {...formItemLayout}
                label='审核结果'
              >
                {getFieldDecorator('result')(
                  <Select onChange={this.getState} style={{ width: 210, marginLeft: '10px' }}>
                    <Option key='0'>所有</Option>
                    <Option key='1'>未审核</Option>
                    <Option key='2'>通过</Option>
                    <Option key='3'>驳回</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={3} key={4}>
              <Button className='record-btn' onClick={this.searchRecord}>搜 索</Button>
            </Col>
          </Row>
          <div></div>
          <Table bordered pagination={pagination} columns={columns} dataSource={this.state.data} />
        </section>
      </Form>
    )
  }
}


const AuditList = Form.create()(AuditListS);
export default AuditList;
